<template>
   <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="item in dateUrl" :key="item">
        <el-image :src="`http://localhost:3002/${item}`"  style="width: 100%">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </el-carousel-item>
    </el-carousel>
</template>

<script>
export default {
  data(){
    return {
      // 图片的url
      dateUrl: []
    }
  },
   methods: {
    //  获取图片的地址
    async rotationImg() {
      const { data } = await this.$axios({
        url: `http://localhost:3002/rotationImg`,
      });
      this.dateUrl = data.imgUrl;
    },
  },
  
  created() {
    // 组件初始化时调用函数加载图片
    this.rotationImg();
  },
}
</script>

<style>

</style>